<template>
  <div class="progressChart">
    <div id="myChart" class="chart1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "JuriseOAWebProgressChart",
  props: {
    percentage: {
      default: 75,
    },
  },
  data() {
    return {
      myChart: null,
      option: {
        title: [
          {
            text: "已完成",
            x: "center",
            top: "55%",
            textStyle: {
              color: "#111",
              fontSize: 14,
              fontWeight: "100",
            },
          },
          {
            text: `${this.percentage}%`,
            x: "center",
            y: "center",
            textStyle: {
              fontSize: "16",
              color: "#111",
              fontFamily: "DINAlternate-Bold, DINAlternate",
              foontWeight: "600",
            },
          },
        ],
        backgroundColor: "#fff",
        polar: {
          radius: ["50%", "80%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(66, 66, 66, .3)",
            },
            data: [this.percentage],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#16CEB9",
                  },
                  {
                    offset: 1,
                    color: "#6648FF",
                  },
                ]),
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["90%"],
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(66, 66, 66, .1)",
              borderWidth: 1,
              borderColor: "#5269EE",
            },
            data: [100],
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["50%"],
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(66, 66, 66, .1)",
              borderWidth: 1,
              borderColor: "#5269EE",
            },
            data: [100],
          },
        ],
      },
    };
  },

  mounted() {
    this.initCharts();
  },

  methods: {
    initCharts() {
      this.myChart = this.$echarts.init(document.getElementById("myChart"));

      //   this.myChart.clear();
      //   setTimeout(this.myChart.setOption(this.option), 500);
      this.myChart.setOption(this.option);

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
        容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.progressChart {
  width: 120px;
  width: 120px;
}

#myChart {
  width: 100%;
  width: 100%;
}

.chart1 {
  width: 100%;
  height: 120px;
}
</style>